<template>
    <div class="ui container">
        <div class="semantic-component">
            <div class="ui selection dropdown semanticDropDown">
                <input type="hidden" name="gender" v-model="selected">
                <i class="dropdown icon"></i>
                <div class="default text">Gender</div>
                <div class="menu">
                    <div class="item" :data-value="item.Value" v-for="item in items" @click="changeSelection(item)">
                        {{item.Gender }}
                    </div>
                </div>
            </div>
            <pre>{{ resultinfo }}</pre>

            <button class="ui button active" @click="showinfo">Following</button>
            <div class="ui labeled button" @click="showinfo" tabindex="0">
                <div class="ui red button"><i class="heart icon"></i> Like</div>
                <a class="ui basic red left pointing label">
                    1,048
                </a>
            </div>
            <div class="ui labeled button" tabindex="0">
                <div class="ui basic blue button"><i class="fork icon"></i> Forks</div>
                <a class="ui basic left pointing blue label">
                    1,048
                </a>
            </div>
            <div class="ui toggle button">切换</div>
            <div class="ui positive check button">Check</div>
            <div class="ui negative uncheck button">Uncheck</div>
            <div class="ui six column center aligned stackable divided grid segment">
                <div class="column">
                    <div class="ui test slider checkbox">
                        <input type="checkbox">
                        <label>1</label>
                    </div>
                </div>
                <div class="column">
                    <div class="ui test toggle checkbox">
                        <input type="checkbox" checked="checked">
                        <label>2</label>
                    </div>
                </div>
                <div class="column">
                    <div class="ui test checkbox">
                        <input type="checkbox">
                        <label>3</label>
                    </div>
                </div>
                <div class="column">
                    <div class="ui test slider checkbox">
                        <input type="checkbox" checked="checked">
                        <label>4</label>
                    </div>
                </div>
                <div class="column">
                    <div class="ui test toggle checkbox">
                        <input type="checkbox">
                        <label>5</label>
                    </div>
                </div>
                <div class="column">
                    <div class="ui test checkbox">
                        <input type="checkbox">
                        <label>6</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                resultinfo: '',
                items: [
                    {Gender: 'Male', Value: 1},
                    {Gender: 'Female', Value: 0}
                ],
                selected: '',
                selecteditem: {}
            }
        },
        methods: {
            changeSelection(item) {
                this.selecteditem = item;
                this.selected = item.Value
            },
            showinfo() {
                console.log("我进来了额");
            }
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            selecteditem: function (newQuestion, oldQuestion) {
                this.resultinfo = JSON.stringify(newQuestion);
            }
        },
        mounted() {
            $(this.$el).find('.semanticDropDown').dropdown()
            $('.test.checkbox').checkbox('attach events', '.toggle.button');
            $('.test.checkbox').checkbox('attach events', '.check.button', 'check');
            $('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');
        }
    }
</script>
